/**
* @description: 工作台==> 计划工单 ===> 计划工单监控 ==> 巡视设备列表
* @author: JiWei
* @date:
**/
<template>
  <view class="patrol-equip">
    <nav-bar class="header" :background="backgroundColor" back :title="title" @goBack="goBack">
      <img slot="iconfont" src="../../../../../static/img/sx.png" alt="" @click="screen">
    </nav-bar>
    <view class="header-bar">
      <ul class="menu">
        <li v-for="(item,index) in menuList" :key="index" @click="chooseMenu(item,index)">
          <img :src="index === current ? item.imgUrl:item.imageUrl" alt="">
          <view class="right-box">
            <text class="menu-num" :class="{selectmenu:index === current}">{{ item.titNum }}</text>
            <text class="menu-state">{{ item.title }}</text>
          </view>
          <view :class="{sj:index === current}"></view>
        </li>
      </ul>
    </view>
    <view class="patrol-search">
      <van-search disabled show-action v-model="searchValue" 
        left-icon="" action-text="重置" 
        right-icon="search" placeholder="搜索"
        @click="showSearch=true" @cancel="onSearch('')" />
    </view>
    <view class="patrol-main" v-if="equipList.length > 0">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model="isLoading"
            :finished="finished"
            finished-text="没有更多了"
            @load="loadMore"
        >
        <view class="equip-list" v-for="(item,index) in equipList" :key="index" :class="{equipWwc:item.TOUR_STATE_NAME ==='未完成'}" @click="jump(item)">
          <view class="top-equip">
<!--            <img src="../../../../../static/img/equipment.png" alt="" v-if="item.NE_TYPE_NAME==='通信设备'">-->
<!--            <img src="../../../../../static/img/opticalCable.png" alt="" v-if="item.NE_TYPE_NAME==='通信光缆'">-->
<!--            <img src="../../../../../static/img/powerSupply.png" alt="" v-if="item.NE_TYPE_NAME==='通信电源'">-->
            <text class="equip-state-wc" v-if="item.TOUR_STATE_NAME === '已完成'">
              <text style="color: #3CDA68">{{ item.TOUR_STATE_NAME }}</text>
            </text>
            <text class="equip-state-wwc" v-else-if="item.TOUR_STATE_NAME === '未完成'">
              <text style="color: #FF7070">{{ item.TOUR_STATE_NAME }}</text>
            </text>
            <text class="equip-title">{{ item.NAME }}</text>
          </view>
          <hr class="patrol-hr">
          <view class="equip-main">
            <text class="equ-big-ltitle">设备分类</text>
            <text class="equ-small-ltitle">{{ item.NE_TYPE_NAME }}</text>
          </view>
          <view class="equip-main" v-if="item.TOUR_STATE_NAME !== '未完成'">
            <text class="equ-big-ltitle">巡视人</text>
            <text class="equ-small-ltitle">{{ item.TOUR_OPER_NAME }}</text>
          </view>
          <view class="equip-main" v-if="item.TOUR_STATE_NAME !== '未完成'">
            <text class="equ-big-ltitle">巡视时间</text>
            <text class="equ-small-ltitle">{{ item.TOUR_TIM }}</text>
          </view>
          <view class="equip-main" v-if="item.TOUR_STATE_NAME !== '未完成'">
            <text class="equ-big-result">巡视结果</text>
            <text class="equ-small-result" :style="{color: statusColor(item)}">{{item.SERVICE_STATE_NAME}}</text>
          </view>
        </view>
        </van-list>
      </van-pull-refresh>
    </view>
    
    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search @cancel="showSearch = false;" @search="onSearch" :empty="showSearch"/>
    </van-popup>
  
    <!--筛选弹窗-->
    <screenPopup
        :type-list="typeList"
        :showScreen="showScreen"
        @closePopup="showScreen=false"
        @confirm="confirmCondition"
    />

  </view>
</template>
<script>
import navBar from "../../../../../components/common/nav-bar";
import plateTitle from "../../../../../components/business/plateTitle"
import screenPopup from "../../../../../components/common/screenPopup";
import search from '../../../../common/search'
import {mapGetters} from "vuex";
export default {
  name: 'patrolEquipment',
  components: { navBar, plateTitle, screenPopup, search },
  props: {},
  data() {
    return {
      backgroundColor:'#417ADC',
      title:'巡视设备列表',
      statusColor: (item) => {
        if(item.SERVICE_STATE_NAME === "新增") return "#41DC83";
        if(item.SERVICE_STATE_NAME === "不存在") return "#FF7070";
        if(item.SERVICE_STATE_NAME === "更新") return "#FFAD0E";
        if(item.SERVICE_STATE_NAME === "一致") return "#417ADC";
      },
      menuList:[],
      searchValue:'',
      current:0,
      showSearch: false,
      showScreen: false,
      screenIndex: 0,
      screenOptions: [
        {name: "全部", value: 0},
        {name: "通信设备", value: 1},
        {name: "通信光缆", value: 2},
        {name: "通信电源", value: 3}],
      equipList:[],
      neId:'',
      total: 0, // 总条数
      page: 1,
      limit:20,
      switchId:'',// 统计切换
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      typeList: [], // 筛选条件列表
      equType:'',// 设备类型
      taskState:'', //携带到计划工单详情 做返回参数
      taskStateName:'', //携带到计划工单详情 做返回参数
      taskId:'', //携带到计划工单详情 做返回参数
    };
  },
  computed: {
    ...mapGetters(['roleAuth']),
  },
  watch: {},
  onLoad(e) {
    this.neId = e.id
    this.taskState = e.taskState
    this.taskStateName = e.taskStateName
    this.taskId = e.objId
    this.getTaskNeListP()
  },
  methods: {
    //获取列表
    getTaskNeListP() {
      let params = {
        task_id: this.neId,
        ne_name: this.searchValue,
        ne_flag: this.equType,
        tour_state: this.switchId,
        limit: this.limit,
        page: this.page
      }
      this.$api.getTaskNeList(params).then(res => {
        this.isLoading = false;
        this.refreshing = false;
        this.menuList = [
          {
            titNum:res.data.neListCount.TOTAL,
            title:'全部',
            imgUrl: require('../../../../../static/img/selectAll.png'),
            imageUrl:require('../../../../../static/img/noSelectAll.png'),
          },{
            titNum:res.data.neListCount.NO_VER,
            title:'未完成',
            imgUrl:require('../../../../../static/img/selectUnfinish.png'),
            imageUrl:require('../../../../../static/img/noSelectUnfinish.png'),
          },{
            titNum:res.data.neListCount.VER,
            title:'已完成',
            imgUrl:require('../../../../../static/img/selectFinish.png'),
            imageUrl:require('../../../../../static/img/noSelectFinish.png'),
          },
        ]
        this.equipList = this.equipList.concat(res.data.ne_list);

        // 因为接口将筛选列表和筛选结果放在一个接口中，导致点击筛选时，出现重新获取筛选列表的情况，从而导致，筛选无法记忆（刷新），解决办法为判断是否已经含有
        if (!this.typeList.length) {
          let typeList = []
          typeList.push({
            title:'设备类型',
            optionList: res.data.ne_type.map(item => {
              !item.VALUE ? (item.VALUE = '') : null;
              return item
            }),
            type:'NE_TYPE_NAME'
          })
          this.typeList = typeList
        }
        this.total = res.data.total_number
      })
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.equipList = [];
      this.getTaskNeListP();
    },
    loadMore() {
      if (this.total > this.equipList.length) {
        this.page = this.page + 1;
        this.getTaskNeListP();
      } else {
        this.finished = true;
      }
    },
    onSearch(searchValue) {
      this.searchValue = searchValue;
      this.onRefresh();
      this.showSearch = false;
    },
    confirmCondition (selected) {
      if(selected.NE_TYPE_NAME == 0) {
        this.equType = ''
        this.onRefresh()
      } else {
        this.equType = selected.NE_TYPE_NAME
        this.onRefresh()
      }
    },
    goBack() {
      uni.navigateTo({
        url: `/pages/workBench/tourTask/taskMonitor/taskMonitor?taskState=${this.taskState}&objId=${this.taskId}&taskStateName=${this.taskStateName}`
      })
    },
    screen() {
      this.showScreen = true;
    },
    chooseMenu(item,index) {
      this.current = index
      if(item.title==='全部') {
        this.switchId = ''
        this.onRefresh()
      }else if(item.title==='未完成') {
        this.switchId = '0'
        this.onRefresh()
      }else {
        this.switchId = '1'
        this.onRefresh()
      }
    },
    jump(item) {
      switch(item.NE_TYPE_NAME) {
        case '通信设备': {
          uni.navigateTo({
            url: `/pages/workBench/tourTask/taskMonitor/tourEquipment/equipmentDetail?id=${item.OBJ_ID}&taskType='巡视'`
          })
          break;
        }
        case '通信光缆': {
          uni.navigateTo({
            url: `/pages/workBench/tourTask/taskMonitor/tourEquipment/cableDetail?id=${item.OBJ_ID}&tourState=${item.TOUR_STATE}&taskState=${this.taskState}&taskStateName=${this.taskStateName}&taskType='巡视'`
          })
          break;
        }
        case '通信电源': {
          uni.navigateTo({
            url: `/pages/workBench/tourTask/taskMonitor/tourEquipment/powerDetail?id=${item.OBJ_ID}&taskState=${this.taskState}&taskStateName=${this.taskStateName}&taskType='巡视'`
          })
          break;
        }
      }
    }
  }
};
</script>
<style scoped lang="scss">
.patrol-equip {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  
  .header {
    img {
      width: px2vw(48);
      margin-right: px2vw(40);
    }
  }
  
  .header-bar {
    height: px2vh(120);
    border-radius: 0 0 px2vh(40) px2vh(40);
    background: #417ADC;
    margin-bottom: px2vh(110);
    
    .menu {
      width: px2vw(1020);
      height: px2vh(220);
      background-image: url('../../../../../static/img/borderR.png');
      background-size: px2vw(1020) px2vh(220);
      margin-left: px2vw(30);
      
      li {
        width: calc(1 * (100% - #{px2vw(280)}) / 3);
        height: 100%;
        margin-left: px2vw(70);
        float: left;
        position: relative;
        
        img {
          width: px2vw(112);
          height: px2vw(112);
          margin-top: px2vh(59);
          float: left;
        }
        
        .right-box {
          width: calc(100% - #{px2vw(122)});
          height: px2vh(112);
          margin-left: px2vw(10);
          float: left;
          margin-top: px2vh(59);

          .menu-num {
            display:block;
            width: 100%;
            font-size: px2vw(54);
            font-weight: bold;
            color: #333;
            float: left;
            vertical-align: middle;
          }
          
          .selectmenu {
            color: #5296FF;
          }
          
          .menu-state {
            font-size: px2vw(36);
            color: #333;
            float: left;
            vertical-align: bottom;
          }
        }
        
        .sj {
          width: px2vw(78);
          height: px2vh(66);
          position: absolute;
          bottom: px2vh(-34);
          right: px2vw(90);
          background-image: url('../../../../../static/img/sj.png');
          background-size: px2vw(78) px2vh(66);
        }
      }
    }
  }
  
  .patrol-search {
    width: px2vw(1020);
    height: 38px;
    margin: px2vw(30) px2vw(30);
    
    .van-search {
      padding: 0 0;
      height: 38px;
    }
    
    .van-search__content {
      background: #fff;
      height: 38px;
    }
    
    /deep/ .van-field__control {
      height: 30px;
    }
  }
  
  .patrol-main {
    height: calc(100vh - #{px2vh(460)} - 38px);
    overflow: auto;

    .equip-list, .equipWwc {
      width: px2vw(1020);
      box-sizing: border-box;
      padding-bottom: px2vh(30);
      background: #fff;
      border-radius: px2vw(20) px2vh(20);
      margin: px2vw(30) px2vh(30);
      
      .top-equip {
        width: calc(100% - #{px2vw(80)});
        margin-left: px2vw(40);
        padding: px2vh(30) 0;
        //height: px2vh(140);
        display: flex;
        align-items: center;
        
        img {
          width: px2vw(64);
          height: px2vw(64);
          margin-top: px2vh(40);
          float: left;
        }
        
        .equip-title {
          flex: 1;
          color: #333;
          font-size: px2vw(48);
          //width: px2vw(700);
          //height: px2vh(48);
          //line-height: px2vh(48);
          //float: left;
          //white-space: nowrap;
          //overflow: hidden;
          //text-overflow: ellipsis;
          //margin-top: px2vh(48);
          margin-left: px2vw(25);
          word-break: break-all;
        }
        
        .equip-state-wc, .equip-state-wwc {
          width: px2vw(123);
          //height: px2vh(50);
          font-size: px2vw(32);
          border-radius: px2vw(10);
          //margin-top: px2vh(48);
          //margin-left: px2vw(27);
          //float: left;
          text-align: center;
        }
        
        .equip-state-wc {
          background: rgba(62, 218, 104, 0.1);
        }
        
        .equip-state-wwc {
          background: rgba(255, 112, 112, 0.1);
        }
      }
      
      .patrol-hr {
        width: px2vw(940);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
      }
      
      .equip-main {
        width: px2vw(888);
        font-size: px2vh(36);
        line-height: px2vh(62);
        margin-left: px2vw(62);
        margin-top: px2vh(20);
        
        .equ-big-ltitle, .equ-big-rtitle {
          color: #666;
        }
        
        .equ-small-ltitle, .equ-small-rtitle {
          margin-left: px2vw(25);
          color: #333;
        }
        
        .equ-big-rtitle {
          margin-left: px2vw(285);
        }
        
        .equ-big-result {
          color: #666;
        }
        
        .equ-small-result {
          margin-left: px2vw(29);
        }
      }
    }
    
    .equipWwc {
      //height: px2vh(252);
    }
  }
  
  .screen-popup {
    width: px2vw(820);
    height: calc(100vh - #{px2vh(212)});
    padding: px2vh(162) px2vw(40) px2vh(50);
    
    .screen-popup-content-main {
      height: calc(100vh - #{px2vh(342)});
      padding-bottom: px2vh(30);
      
      .screen-type-item {
        margin-bottom: px2vh(30);
        
        .plate-title {
          margin-bottom: px2vh(36);
        }
        
        .screen-option-container {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          
          .screen-option-item {
            width: px2vw(260);
            height: px2vh(90);
            margin-bottom: px2vh(20);
            line-height: px2vh(90);
            background: #f7f7f7;
            color: #666;
            font-size: px2vh(36);
            text-align: center;
            border-radius: $border-radius-base;
          }
          .screen-option-item.active {
            background: #ecf1fb;
            color: #417ADC;
          }
        }
      }
    }
    
    .btn-container {
      display: flex;
      justify-content: space-between;
      
      .van-button {
        height: px2vh(100);
        border-radius: $border-radius-base;
      }
      
      .van-button:first-child {
        width: px2vw(260);
        margin-right: px2vw(30);
      }
    }
  }
}
</style>